<template>
  <div v-loading="loading">
    <div v-if="details.status < 4" class="prompt">您反应的问题我们正在加紧受理中！请耐心等待</div>
    <div v-if="details.status === 4" class="prompt">请您阅读后对我们的回复进行评价。</div>
    <div class="card" style="margin-bottom: 20px" v-if="details.status === 13">
      <div class="alert">
        <p>
          案件已退回
          <span class="desc">投诉举报内容需要修改完善或需补正材料，请按照要求尽快予以完善，重新提交</span>
        </p>
        <el-button @click="handleSubmit()" type="primary" size="mini" plain>重新提交</el-button>
      </div>
    </div>
    <div class="card" v-if="details.status === 13">
      <div class="alert">返回修改或补正信息</div>
      <el-form class="key-value" label-width="110px">
        <el-form-item label="退回时间：">
          {{ details.backInfo.backTime }}
        </el-form-item>
        <el-form-item label="修改内容：">
          {{ details.backInfo.modifyContent }}
        </el-form-item>
        <el-form-item label="补正内容：">
          {{ details.backInfo.requireContent }}
        </el-form-item>
      </el-form>
    </div>
    <div class="card" v-if="details.status === 0 && details.subStatus === 2">
      <div>
        <div class="alert">补正材料</div>
        <el-form class="key-value" label-width="110px">
          <el-form-item label="补正要求：">
            <span v-if="details.materialCorrectionDtoList && details.materialCorrectionDtoList.length">{{ details.materialCorrectionDtoList[details.materialCorrectionDtoList.length - 1].correctRequirement }}</span>
          </el-form-item>
          <el-form-item label="补正材料：" prop="wordAttachmentList">
            <div style="display: flex; align-items: center">
              <input @change="handleFileChange" ref="fileInput" id="fileInput" class="vision-hide" type="file" accept=".bmp,.jpg,.jpeg,.png,.tif,.gif,.mov,.avi,.mp4,.wmv,.rmvb,.docx,.pptx,.xlsx,.doc,.ppt,.xls,.pdf,.rar,.zip,.7z" />
              <el-button :loading="uploading" @click="handleUploadFile" type="primary" plain size="mini">上传附件</el-button>
              <ol class="color-danger" style="line-height: 1.2; font-size: 12px; list-style-type: none; padding-left: 20px">
                <li>温馨提示: 请按照填报要求提供与投诉举报事项相关的资料，上传的附件大小不能超过100M，附件类型支持图片，视频，文档，压缩包等格式文件。</li>
              </ol>
              <el-button :loading="uploading" @click="handleAddattachment" type="primary" plain size="mini">提交补正材料</el-button>
            </div>
          </el-form-item>
          <el-table :data="fileList" size="mini" style="margin-top: 20px; margin-left: 140px">
            <el-table-column prop="fileName" label="附件名称"></el-table-column>
            <el-table-column label="操作" width="240px" align="center">
              <template slot-scope="{ row, $index }">
                <el-button @click="handleDownload(row)" type="primary" plain size="mini">下载</el-button>
                <el-button @click="handlePreview(row)" type="primary" plain size="mini">预览</el-button>
                <el-button @click="handleRemoveFile($index)" type="primary" plain size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </div>
    <div class="card">
      <div class="header">
        <div class="title">投诉举报人基本信息</div>
        <!--        <div v-if="details.status < 4" class="time">-->
        <!--          <i class="img icon-clock"></i>-->
        <!--          <span>处理剩余时限：</span>-->
        <!--          <span v-if="details.status === 3" class="color-danger">{{ details.deadline | timeRemainingDHMS }}</span>-->
        <!--          <span class="color-danger">{{ details.currentStepDeadline | timeRemainingDHMS }}</span>-->
        <!--        </div>-->
        <el-button v-if="details.status === 0" @click="recallDialog.visible = true" type="primary" plain size="mini">撤回投诉举报案件</el-button>
        <el-button v-if="details.status === 6 && !details.repeatCheck" @click="reconsiderationDialog.visible = true" type="primary" plain size="mini">复议</el-button>
      </div>
      <el-form class="key-value" label-width="110px" v-if="details.complainPersonMainInfo">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系人：">{{ details.complainPersonMainInfo.createUsername || details.complainPersonMainInfo.companyContactName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号：">
              {{ details.complainPersonMainInfo.idNumber }}
            </el-form-item>
            <!-- <el-form-item label="投诉人类型：">
                {{ details.createType | workOrderCreatorType }}
              </el-form-item> -->
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码：">{{ details.complainPersonMainInfo.mobile || "-" }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系邮箱：">
              {{ details.complainPersonMainInfo.email }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业名称：">
              {{ details.complainPersonMainInfo.companyName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社会信用代码：">
              {{ details.complainPersonMainInfo.socialCreditNumber }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否授权：">
              {{ details.complainPersonMainInfo.auth ? "是" : "否" }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="委托人：">
              {{ details.complainPersonMainInfo.mandator }}
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-form-item label="通讯地址：">{{ details.companyAddress || details.address || "-" }}</el-form-item>
        <el-form-item v-if="details.complainPersonMainInfo && details.complainPersonMainInfo.attachmentList.length" label="委托授权书："></el-form-item>
        <el-form-item v-if="details.complainPersonMainInfo && details.complainPersonMainInfo.attachmentList.length" label="" label-width="0">
          <el-table :data="details.complainPersonMainInfo.attachmentList" size="mini">
            <el-table-column prop="fileName" label="附件"></el-table-column>
            <el-table-column label="操作" width="160px" align="center">
              <template slot-scope="{ row }">
                <el-button @click="handleDownload(row)" type="text" plain>下载</el-button>
                <el-button @click="handlePreview(row)" type="text" plain>预览</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>
    <div class="card">
      <div class="header">
        <div class="title">投诉对象基本信息</div>
      </div>
      <el-form class="key-value" label-width="110px" v-if="details.complainant">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="事发地：">{{ details.complainant.address }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投诉对象：" label-width="110px">{{ details.complainant.addressDepartmentName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人：" label-width="110px">{{ details.complainant.complaintContactName }}</el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="手机号码：" label-width="110px">{{ details.complainant.complaintContactMobile }}</el-form-item>
      </el-form>
    </div>
    <div class="card">
      <div class="header">
        <div class="title">反映问题基本信息</div>
      </div>
      <el-form-item label="案件名称："></el-form-item>
      <el-form class="key-value" label-width="110px" v-if="details.questionMainInfo">
        <el-form-item label="主要诉求：">
          <div v-html="txt2HTML(details.questionMainInfo.mainApply)"></div>
        </el-form-item>
        <el-form-item label="事实理由：">
          <div v-html="txt2HTML(details.questionMainInfo.factReason)"></div>
        </el-form-item>

        <el-form-item label="拖欠账款：">{{ details.questionMainInfo.isArrear ? "是" : "否" }}</el-form-item>
        <el-form-item label="合同协议名称：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.contractName }}</el-form-item>
        <el-form-item label="合同/协议编号：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.contractCode }}</el-form-item>
        <el-form-item label="合同/协议主要条款：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.defaultClause }}</el-form-item>
        <el-form-item label="欠款金额：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.arrearsAmount }}</el-form-item>
        <el-form-item label="合同金额：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.contractAmount }}</el-form-item>
        <el-form-item v-if="details.questionMainInfo && details.questionMainInfo.wordAttachmentList.length" label="佐证材料"></el-form-item>
        <el-form-item v-if="details.questionMainInfo && details.questionMainInfo.wordAttachmentList.length" label="" label-width="0">
          <el-table v-if="details.questionMainInfo.wordAttachmentList && details.questionMainInfo.wordAttachmentList.length" :data="details.questionMainInfo.wordAttachmentList" size="mini">
            <el-table-column prop="fileName" label="附件名称"></el-table-column>
            <el-table-column label="操作" width="160px" align="center">
              <template slot-scope="{ row }">
                <el-button @click="handleDownload(row)" type="text" plain>下载</el-button>
                <el-button @click="handlePreview(row)" type="text" plain>预览</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>
    <div class="card">
      <div class="header">
        <div class="title">案件办理信息</div>
      </div>
      <el-form class="key-value" label-width="110px" v-if="details.workOrderHandleInfo">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="案件编号：">
              {{ details.workOrderHandleInfo.workOrderNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="案件状态：">
              <span v-if="details.workOrderHandleInfo.status === '0'">待受理</span>
              <span v-if="details.workOrderHandleInfo.status === '1'">回退中</span>
              <span v-if="details.workOrderHandleInfo.status === '2'">待确认</span>
              <span v-if="details.workOrderHandleInfo.status === '3'">调查中</span>
              <span v-if="details.workOrderHandleInfo.status === '4'">待办结</span>
              <template v-if="details.workOrderHandleInfo.status === '5'">
                <span v-if="details.workOrderHandleInfo.appraiseStatus === 'N'">待评价</span>
                <span v-else>已办结</span>
              </template>
              <span v-if="details.workOrderHandleInfo.status === '6'">不受理</span>
              <span v-if="details.workOrderHandleInfo.status === '7'">已中止</span>
              <span v-if="details.workOrderHandleInfo.status === '8'">已终止</span>
              <span v-if="details.workOrderHandleInfo.status === '9'">撤回中</span>
              <span v-if="details.workOrderHandleInfo.status === '10'">已撤回</span>
              <span v-if="details.workOrderHandleInfo.status === '11'">已移交</span>
              <span v-if="details.workOrderHandleInfo.status === '12'">预审中</span>
              <span v-if="details.workOrderHandleInfo.status === '13'">已退回</span>
              <span v-if="details.workOrderHandleInfo.status === '14'">放弃投诉举报</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="受理单位：" label-width="110px">
              {{ details.workOrderHandleInfo.acceptDepartmentName }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form class="key-value" label-width="105px" v-if="details.workOrderHandleInfo">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="承办单位：" label-width="110px">
              {{ details.workOrderHandleInfo.processDepartmentName || "-" }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="案件归属地：" label-width="110px">
              {{ details.workOrderHandleInfo.ownershipCase }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="督办案件：" label-width="110px">
              {{ details.workOrderHandleInfo.supervisionCases }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="督办单位：" label-width="110px">
              {{ details.workOrderHandleInfo.supervisionDepartmentName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="案件来源：" label-width="110px">
              {{ details.workOrderHandleInfo.itemSource === 0 ? "网站" : details.workOrderHandleInfo.itemSource === 2 ? "手动录入" : "导入" }}
              <!-- 0网站1-12345导入2手动录入 -->
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="推送单位：" label-width="110px">
              {{ details.workOrderHandleInfo.pushDepartmentName }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div v-if="details.status === 6" class="portals-card" style="margin-top: 20px">
      <div class="header">
        <div class="title">不受理信息</div>
      </div>
      <el-form class="key-value">
        <el-form-item label="不受理原因：" v-if="details.rejectWorkOrderDto">{{ details.rejectWorkOrderDto.notAcceptReason }}</el-form-item>
        <el-form-item label="不受理备注：" v-if="details.rejectWorkOrderDto">{{ details.rejectWorkOrderDto.comment }}</el-form-item>
        <el-form-item v-if="details.rejectWorkOrderDto && details.rejectWorkOrderDto.rejectAttachments" label="不予受理通知书">
          <el-table v-if="details.rejectWorkOrderDto.rejectAttachments && details.rejectWorkOrderDto.rejectAttachments.length" :data="details.rejectWorkOrderDto.rejectAttachments" size="mini">
            <el-table-column prop="fileName" label="附件名称"></el-table-column>
            <el-table-column label="操作" width="160px" align="center">
              <template slot-scope="{ row }">
                <el-button @click="handleDownload(row)" type="text" plain>下载</el-button>
                <el-button @click="handlePreview(row)" type="text" plain>预览</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>

    <template v-if="[5].includes(details.status) && !hasWorkOrderAppraise">
      <div class="portals-card" style="margin-top: 20px">
        <div class="header">
          <div class="title">评价</div>
        </div>
        <el-form ref="appraiseForm" :model="appraiseForm" :rules="appraiseFormRules" label-width="120px">
          <el-row :gutter="0">
            <el-col :span="9">
              <el-form-item label="整体满意度：" prop="satisfiedScore">
                <startAppraise v-model="appraiseForm.satisfiedScore"></startAppraise>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="9">-->
            <!--              <el-form-item label="处理时效性：" prop="processEffectiveScore">-->
            <!--                <startAppraise v-model="appraiseForm.processEffectiveScore"></startAppraise>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="6">-->
            <!--              <el-form-item label="处理有效性：" prop="processAvailableScore">-->
            <!--                <startAppraise v-model="appraiseForm.processAvailableScore"></startAppraise>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
          </el-row>
          <el-form-item label="评价内容：" prop="comment">
            <el-input v-model="appraiseForm.comment" show-word-limit maxlength="1000" placeholder="请输入评价内容" type="textarea" style="width: 100%; height: 80px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: center; padding: 30px 0 10px 0">
        <el-button @click="handleAppraise" :disabled="hasError" type="primary" class="send-btn">确认无误，提交</el-button>
      </div>
    </template>
    <div v-if="hasWorkOrderAppraise" class="portals-card" style="margin-top: 20px">
      <div class="header">
        <div class="title">群众评价</div>
      </div>
      <el-form class="key-value" ref="appraiseForm" label-width="120px">
        <el-row :gutter="0">
          <el-col :span="9">
            <el-form-item label="整体满意度：">
              <startAppraise :value="workOrderAppraise.satisfiedScore" readonly></startAppraise>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="9">-->
          <!--            <el-form-item label="处理时效性：">-->
          <!--              <startAppraise :value="workOrderAppraise.processEffectiveScore" readonly></startAppraise>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="处理有效性：">-->
          <!--              <startAppraise :value="workOrderAppraise.processAvailableScore" readonly></startAppraise>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-form-item label="评价内容："><div v-html="txt2HTML(workOrderAppraise.comment)"></div></el-form-item>
      </el-form>
    </div>

    <template v-if="details.workOrderSubmitFinishResult">
      <div class="portals-card" style="margin-top: 20px">
        <div class="header">
          <div class="title">办结信息</div>
        </div>
        <el-form class="key-value" label-width="120px">
          <el-form-item label="提交办结类型：">{{ workOrderSubmitFinishResult.reason }}</el-form-item>
        </el-form>
        <el-form class="key-value" label-width="120px">
          <el-form-item label="提交办结理由："><div v-html="txt2HTML(workOrderSubmitFinishResult.comment)"></div></el-form-item>
        </el-form>
      </div>

      <!--      <el-table v-if="workOrderSubmitFinishResult.attachmentList && workOrderSubmitFinishResult.attachmentList.length" :data="workOrderSubmitFinishResult.attachmentList" size="mini" style="margin-top: 10px">-->
      <!--        <el-table-column prop="fileName" label="附件"></el-table-column>-->
      <!--        <el-table-column prop="fileName" label="文件名称"></el-table-column>-->
      <!--        <el-table-column label="操作" width="160px" align="center">-->
      <!--          <template slot-scope="{row}">-->
      <!--            <el-button @click="handleDownload(row)" type="primary" plain size="mini">下载</el-button>-->
      <!--            <el-button @click="handlePreview(row)" type="primary" plain size="mini">预览</el-button>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--      </el-table>-->
    </template>

    <template v-if="canComment">
      <div v-if="![5, 6].includes(details.status) || ([5, 6].includes(details.status) && comments.length)" class="portals-card" style="margin-top: 20px">
        <div class="header">
          <div class="title">留言</div>
        </div>
        <ul v-loading="commentLoading" class="comments" v-if="comments.length">
          <li v-for="item in comments">
            <div class="info">
              <span class="name">{{ item.publishUsername }}</span>
              <span class="type">{{ item.parentCommentId > 0 ? "回复" : "评论" }}</span>
              <span v-if="item.parentCommentId > 0" class="name">{{ item.parentPublishUsername }}</span>

              <span class="time">{{ item.createTime }}</span>
              <span v-if="![5, 6].includes(details.status)" @click="handleSetReplay(item)" class="replay pointer">回复</span>
            </div>
            <div class="content">{{ item.comment }}</div>
          </li>
        </ul>

        <div v-else class="no-comments">暂无数据</div>

        <div class="comments-footer">
          <el-input v-if="![5, 6].includes(details.status)" v-model="form.comment" @keyup.delete.native="handleDeleteReplayObject" class="message-input" placeholder="请输入留言内容" maxlength="1000" style="width: 660px">
            <template v-if="replayObject.publishUsername" slot="prepend">回复 {{ replayObject.publishUsername }}</template>
          </el-input>
          <el-button @click="$router.back()" type="primary" plain class="send-btn">返回</el-button>
          <el-button v-if="![5, 6].includes(details.status)" @click="handleComment" :disabled="commentLoading" type="primary" class="send-btn">留言</el-button>
        </div>

        <div id="commentError" class="color-danger" style="height: 30px">{{ commentError }}</div>
      </div>
    </template>
    <div>
      <el-button v-if="details.status === 6 && details.rejectReview === 'N'" @click="dialogFormVisible = true" type="primary" plain size="mini">申请复核</el-button>
    </div>
    <el-dialog title="申请复核" :visible.sync="dialogFormVisible">
      <el-form ref="rejectReviewForm" :model="rejectReviewForm" :rules="rejectReviewRules">
        <el-form-item label="理由" prop="comment">
          <el-input type="textarea" v-model="rejectReviewForm.comment"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRejectReview">确 定</el-button>
      </div>
    </el-dialog>
    <previewDialog :visible.sync="previewDialog.visible" :filePath="previewDialog.fileURL" width="900px"></previewDialog>
    <recallDialog :visible.sync="recallDialog.visible" :workOrderId="details.id" @success="getDetails()"></recallDialog>
    <reconsiderationDialog :visible.sync="reconsiderationDialog.visible" :workOrderId="details.id" @success="getDetails()"></reconsiderationDialog>
  </div>
</template>

<script>
import * as portalsApi from "@/api/portals";
import { downloadFile, getCMSUserInfo, isEmpty, postPortalsHeight } from "@/utils/common";
import startAppraise from "@/components/startAppraise/index.vue";
import previewDialog from "@/views/workOrder/components/previewDialog";
import recallDialog from "@/views/portals/components/recallDialog.vue";
import reconsiderationDialog from "@/views/portals/components/reconsiderationDialog.vue";
import upload from "@/components/upload";
import { fileSize } from "@/utils/common";
import * as mixins from "@/utils/mixins";
import { workOrderEventSource, workOrderStatus, timeRemaining, workOrderCreatorType, workOrderPublicStatus, workOrderPublicIntention, timeRemainingDHMS, txt2HTML, hourMinute, filename, timeFormatDHMS, workOrderComplaintObjectType, money } from "@/utils/filters";
import * as validators from "@/utils/validators";
import { appraise, commentsOfMyWorkOrder, configure, detailsOfMyWorkOrder } from "@/api/portals/workOrder";
import * as fileApi from "@/api/file";
import { mapState } from "vuex";
import Template from "../../system/template.vue";

export default {
  name: "workOrderDetails",
  components: { startAppraise, previewDialog, upload, recallDialog, reconsiderationDialog },
  mixins: [mixins.form],
  filters: {
    workOrderEventSource,
    workOrderStatus,
    timeRemaining,
    workOrderCreatorType,
    workOrderPublicStatus,
    workOrderPublicIntention,
    timeRemainingDHMS,
    hourMinute,
    workOrderComplaintObjectType,
    money,
  },
  data() {
    return {
      hasError: true,
      loading: true,
      canComment: false,
      details: {},
      comments: [],
      commentLoading: false,
      dialogFormVisible: false,
      rejectReviewForm: {
        comment: "",
      },
      rejectReviewRules: {
        comment: [{ required: true, message: "请填写" }],
      },
      form: {
        comment: "",
      },
      replayObject: {},
      appraiseForm: {
        comment: "",
        processAvailableScore: 0,
        processEffectiveScore: 0,
        satisfiedScore: 0,
      },
      submitting: false,
      appraiseFormRules: {
        // processAvailableScore: [
        //   { required: true, message: "请填写处理有效性" },
        //   { validator: validators.min(1, "请填写处理有效性") }
        // ],
        // processEffectiveScore: [
        //   { required: true, message: "请填写处理时效性" },
        //   { validator: validators.min(1, "请填写处理时效性") }
        // ],
        satisfiedScore: [{ required: true, message: "请填写整体满意度" }, { validator: validators.min(1, "请填写整体满意度") }],
      },
      canDelReplayObject: false,
      previewDialog: {
        fileURL: "",
        visible: false,
      },
      cmsUserInfo: {},
      commentError: "",
      recallDialog: {
        visible: false,
      },
      reconsiderationDialog: {
        visible: false,
      },
      fileList: [],
      uploading: false,
    };
  },
  computed: {
    workOrderProcessResult() {
      return this.details.workOrderProcessResult || {};
    },
    hasWorkOrderAppraise() {
      return Boolean(this.details.workOrderAppraise);
    },
    workOrderAppraise() {
      return this.details.workOrderAppraise || {};
    },
    notAcceptedResult() {
      const processList = this.details.processList;
      for (let i = processList.length - 1, min = 0; i >= min; i--) {
        const item = processList[i];
        // 不受理
        if (item.operateType === "06") {
          return item;
        }
      }
      return {};
    },
    actualProcessDay() {
      const actualProcessDay = this.details.actualProcessDay;
      if (isEmpty(actualProcessDay)) return "-";
      return `${timeFormatDHMS(Number(actualProcessDay) * 1000)}`;
    },
    workOrderSubmitFinishResult() {
      return this.details.workOrderSubmitFinishResult || {};
    },
  },
  watch: {
    appraiseForm: {
      handler() {
        this.hasError = validators.validate(this.appraiseForm, this.appraiseFormRules);
      },
      deep: true,
      immediate: true,
    },
    "form.comment"() {
      this.commentError = "";
    },
  },
  created() {
    this.cmsUserInfo = getCMSUserInfo();
    this.getDetails();
    this.getComments();
    portalsApi.workOrder.configure({ type: 7 }).then((res) => {
      this.canComment = res.result === "1";
    });
  },
  methods: {
    txt2HTML,
    // 上传材料补正
    handleAddattachment() {
      portalsApi.workOrder
        .addAttachment({
          attachmentList: this.fileList,
          createUserId: this.cmsUserInfo.userId,
          id: this.$route.query.id,
        })
        .then(() => {
          this.$message.success("上传材料补正成功");
          this.getDetails();
        })
        .finally(() => {
          this.uploading = false;
        });
    },
    handleUploadFile() {
      this.$refs.fileInput.click();
    },
    clearFileInput() {
      document.getElementById("fileInput").value = "";
    },
    handleFileChange(e) {
      const file = e.target.files[0];
      if (fileSize(file) > 100) {
        this.clearFileInput();
        return this.$message.error("请上传100M以内的文件");
      }

      const formData = new FormData();
      formData.append("file", file);
      this.uploading = true;
      fileApi
        .upload(formData)
        .then((res) => {
          this.$message.success("上传成功");
          this.fileList.push({
            fileName: file.name,
            fileUrl: res.data,
          });
        })
        .finally(() => {
          this.clearFileInput();
          this.uploading = false;
        });
    },
    handleSubmit() {
      // portalsApi.workOrder.resubmit(form).then((res) => {
      this.$router.push({ path: "/portals/createStep2", query: { workOrderId: this.details.id } });
      // })
    },
    handleRejectReview() {
      this.$refs.rejectReviewForm.validate((valid) => {
        if (valid) {
          portalsApi.workOrder
            .rejectReview({
              comment: this.rejectReviewForm.comment,
              workOrderNo: this.details.workOrderNo,
            })
            .then((res) => {
              this.dialogFormVisible = false;
              this.getDetails();
            })
            .finally(() => {});
        } else {
          return false;
        }
      });
    },
    handlePreview(row) {
      this.previewDialog = {
        visible: true,
        fileURL: row.fileUrl,
      };
    },
    getDetails() {
      this.loading = true;
      console.log(this.cmsUserInfo, "this.cmsUserInfo");
      portalsApi.workOrder
        .detailsOfMyWorkOrder(this.$route.query.id, {
          idNumber: this.cmsUserInfo.idNumber,
          socialCreditNumber: this.cmsUserInfo.socialCreditNumber ? this.cmsUserInfo.socialCreditNumber : "",
        })
        .then((res) => {
          this.details = res.result;
          if (this.details.materialCorrectionDtoList && this.details.materialCorrectionDtoList.length) {
            this.fileList = Array.isArray(this.details.materialCorrectionDtoList[this.details.materialCorrectionDtoList.length - 1].workOrderAttachments) ? this.details.materialCorrectionDtoList[this.details.materialCorrectionDtoList.length - 1].workOrderAttachments : [];
          }
        })
        .then(() => this.$nextTick(postPortalsHeight))
        .finally(() => (this.loading = false));
    },
    getComments() {
      this.commentLoading = true;
      portalsApi.workOrder
        .commentsOfMyWorkOrder(this.$route.query.id, {
          idNumber: this.cmsUserInfo.idNumber,
          socialCreditNumber: this.cmsUserInfo.socialCreditNumber,
        })
        .then((res) => {
          this.comments = res.result;
        })
        .then(() => this.$nextTick(postPortalsHeight))
        .finally(() => {
          this.commentLoading = false;
        });
    },
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },
    handleAppraise() {
      this.validate("appraiseForm")
        .then(() => {
          const form = { ...this.appraiseForm };
          const cmsUserInfo = getCMSUserInfo();
          form.createUser = cmsUserInfo.userId;
          form.createUsername = cmsUserInfo.userName;
          form.workOrderId = this.$route.query.id;
          form.idNumber = this.cmsUserInfo.idNumber;
          form.socialCreditNumber = this.cmsUserInfo.socialCreditNumber;
          return portalsApi.workOrder.appraise(form);
        })
        .then(() => this.getDetails());
    },
    handleComment() {
      const form = { ...this.form };
      if (form.comment.length === 0) return;
      const replayObject = this.replayObject;
      const cmsUserInfo = getCMSUserInfo();
      form.createUser = cmsUserInfo.userId;
      form.publishUsername = cmsUserInfo.userName;
      form.workOrderId = this.$route.query.id;
      form.idNumber = this.cmsUserInfo.idNumber;
      form.socialCreditNumber = this.cmsUserInfo.socialCreditNumber;
      let promise = portalsApi.workOrder.addCommentOfMyWorkOrder;
      if (replayObject.publishUsername) {
        form.parentCommentId = replayObject.id;
        form.parentPublishUsername = replayObject.publishUsername;
        promise = portalsApi.workOrder.addFeedbackOfMyWorkOrder;
      }

      promise(form)
        .then((res) => {
          this.form.comment = "";
          this.replayObject = {};
          this.getComments();
        })
        .catch((e) => {
          this.commentError = e.message;
        });
    },
    handleSetReplay(item) {
      this.replayObject = { ...item };
      this.commentError = "";
    },
    handleDeleteReplayObject(e) {
      if (this.canDelReplayObject) {
        this.replayObject = {};
        this.canDelReplayObject = false;
        return;
      }
      this.canDelReplayObject = this.form.comment === "";
    },
    handleUploadSuccess(file) {
      // const file = fileList[fileList.length - 1]
      const cmsUserInfo = getCMSUserInfo();
      const data = {
        attachmentList: [file],
        id: this.details.id,
        createUserId: cmsUserInfo.userId,
      };
      portalsApi.workOrder
        .addAttachment(data)
        .then(() => {
          this.details.attachmentList.push(file);
          this.$message.success("上传成功");
        })
        .finally(() => this.$nextTick(postPortalsHeight));
    },
  },
};
</script>

<style lang="less" scoped>
.comments {
  li {
    padding: 20px 0 20px 60px;
    border-bottom: 1px solid #e8e8e8;

    .info {
      display: flex;
      line-height: 20px;

      .name {
        font-weight: 600;
        color: #0e87f7;
      }

      .type {
        margin: 0 20px;
        font-weight: 400;
        color: #666666;
      }

      .time {
        flex: 1;
        text-align: right;
        color: #666666;
      }

      .replay {
        margin-left: 20px;
        color: @color-primary;
      }
    }

    .content {
      margin-top: 20px;
      color: #666666;
      line-height: 20px;
    }
  }
}

.no-comments {
  text-align: center;
  color: #909399;
  margin-top: 20px;
}

.comments-footer {
  margin-top: 30px;
  display: flex;
  justify-content: center;

  .send-btn {
    margin-left: 10px;
    width: 100px;
    height: 36px;
  }
}

.prompt {
  font-size: 12px;
  color: #0b5fd5;
  line-height: 17px;
  padding: 8.5px 20px;
  background: rgba(114, 195, 255, 0.1);
  border-radius: 2px;
  border: 1px solid #3279f2;
  margin-bottom: 20px;
}
.alert {
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  padding: 2px 10px;
  background: linear-gradient(270deg, #fff 0%, #feeece 100%);
}
</style>
